<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>
	<ui:composition template="/secured/workarea.xhtml">
		<ui:define name="espacio_trabajo">
			<h:form id="form">
				<table>
					<tr>
						<td align="left">
							<div class="breadcrumb flat" style="text-align: left">
								<h:commandLink action="#{menuBean.regresaInicio}" value="Inicio" />
								<h:outputLink value="#" styleClass="active">#{msg.clientes}</h:outputLink>
							</div>
						</td>
					</tr>
				</table>
				<p:growl id="growl" showDetail="true" />
				<p:panel>
					<h:outputText value="#{msg.frsClientes}" style="text-align:left;" />
				</p:panel>
				<p:panel>
					<h:panelGrid columns="4" style="text-align:left;">
						<p:commandButton id="nuevoButton" value="#{msg.nuevo }"
							rendered="#{beanClientes.alta}" icon="ui-icon-plusthick"
							onclick="nuevoDialog.show()" update=":form:displayNuevo, growl" />
						<p:commandButton id="viewButton" value="#{msg.ver }"
							rendered="#{beanClientes.consulta}" icon="ui-icon-search"
							oncomplete="verDialog.show()" update=":form:displayVer, growl" />
						<p:commandButton id="editarButton" value="#{msg.editar }"
							rendered="#{beanClientes.cambios}" icon="ui-icon-pencil"
							onclick="editarDialog.show()" update=":form:displayEditar, growl" />
						<p:commandButton id="deleteButton" value="#{msg.eliminar }"
							rendered="#{beanClientes.borrar}" icon="ui-icon-trash"
							onclick="borrarDialog.show()" update="growl" />
					</h:panelGrid>
				</p:panel>
				<p:panel>
					<p:dataTable id="clientesTable"
						value="#{beanClientes.listaClientes}" var="cliente"
						rowKey="#{cliente.idCliente}" paginator="true"
						selection="#{beanClientes.clienteSelected}"
						filteredValue="#{beanClientes.filteredClientes }"
						paginatorPosition="bottom" rows="#{beanTabla.noRegistros}">
						<p:column selectionMode="single" style="width:2%" />
						<p:column id="cteCve" headerText="#{msg.clave}"
							sortBy="#{cliente.clave}" filterBy="#{cliente.clave }">
							<h:outputText id="cveCte" value="#{cliente.clave}" />
						</p:column>
						<p:column id="clienteNombre" headerText="#{msg.nombre}"
							filterBy="#{cliente.nombre }" sortBy="#{cliente.nombre}">
							<h:outputText id="nombreCliente" value="#{cliente.nombre}" />
						</p:column>
						<p:column id="clienteResponsable" headerText="#{msg.responsable}"
							filterBy="#{cliente.responsable }"
							sortBy="#{cliente.responsable}">
							<h:outputText id="responsableCliente"
								value="#{cliente.responsable}" />
						</p:column>
					</p:dataTable>
					<h:panelGroup>
						<h:panelGrid columns="3" style="text-align:left;">
							<h:outputText value="#{msg.registrosPP}"
								style="font-size:x-small" />
							<h:panelGroup>
								<h:inputText size="3"
									style="font-size:x-small; height:15px; width:25px"
									value="#{beanTabla.registros}" id="noRegistrosPP" />
								<p:watermark value="#{beanTabla.noRegistros}"
									for="noRegistrosPP" />
							</h:panelGroup>
							<p:commandButton icon="ui-icon-arrowrefresh-1-w"
								style="font-size:x-small" update="clientesTable"
								actionListener="#{beanTabla.actualizaRegistros}" />
						</h:panelGrid>
					</h:panelGroup>
				</p:panel>
				<!-- Panel de Ver -->
				<p:dialog id="dialog" header="#{msg.ver}" widgetVar="verDialog"
					draggable="false" position="top" modal="true">
					<h:panelGrid id="displayVer" columns="2" cellpadding="4" style="text-align:left;">
						<h:panelGroup id="messagePanelVer" layout="block">
							<h:messages errorStyle="color: red" infoStyle="color: green"
								layout="list" style="font-size:12px;font-family:Arial" />
						</h:panelGroup>
						<h:outputText />
						<h:outputText value="#{msg.clave}" />
						<p:inputText readonly="true"
							value="#{beanClientes.clienteSelected.clave}"
							style="font-weight:bold; height:100%;" />
						<h:outputText value="#{msg.nombre}" />
						<p:inputText readonly="true"
							value="#{beanClientes.clienteSelected.nombre}"
							style="font-weight:bold; height:100%;" />
						<h:outputText value="#{msg.responsable}" />
						<p:inputText readonly="true"
							value="#{beanClientes.clienteSelected.responsable}"
							style="font-weight:bold; height:100%;" />
						<h:outputText value="#{msg.telefono}" />
						<p:inputText readonly="true"
							value="#{beanClientes.clienteSelected.telefono}"
							style="font-weight:bold; height:100%;" />
						<h:outputText value="#{msg.email}" />
						<p:inputText readonly="true"
							value="#{beanClientes.clienteSelected.email}"
							style="font-weight:bold; height:100%;" />
						<h:outputText value="#{msg.tipo}" />
						<p:inputText readonly="true"
							value="#{beanClientes.clienteSelected.tipoClienteString}"
							style="font-weight:bold; height:100%;" />
					</h:panelGrid>
					<p:commandButton id="aceptarVerBtn" value="#{msg.aceptar }"
						icon="ui-icon-check" onclick="verDialog.hide()" />
				</p:dialog>
				<!-- Fin de panel de Ver -->
				<!--  Inicio panel de Nuevo -->
				<p:dialog id="dialogNuevo" header="#{msg.frsNuevoRegistro}"
					widgetVar="nuevoDialog" closable="true" modal="true" position="top"
					draggable="false" width="400">
					<h:panelGrid columns="2" width="100%" id="displayNuevo" style="text-align:left;">
						<h:outputText value="#{msg.clave}*" />
						<p:inputText value="#{beanClientes.clienteNuevo.clave}"
							label="Clave"
							style="width: 260px; font-weight:bold; height:100%; " />
						<h:outputText id="nombrePopupNuevoLabel" value="#{msg.nombre}*" />
						<p:inputText id="nombrePopupNuevo" label="Nombre"
							value="#{beanClientes.clienteNuevo.nombre }"
							style="width: 260px; font-weight:bold; height:100%; " />
						<h:outputText id="responsablePopupNuevoLabel"
							value="#{msg.responsable }*" />
						<p:inputText id="responsableNuevoString" label="Responsable"
							value="#{beanClientes.clienteNuevo.responsable}"
							style="width: 260px; font-weight:bold; height:100%; " />
						<h:outputText id="telefonoPopupNuevoLabel"
							value="#{msg.telefono}*" />
						<p:inputText id="telefonoPopupNuevo" label="Telefono"
							value="#{beanClientes.clienteNuevo.telefono}"
							style="width: 260px; font-weight:bold; height:100%; " />
						<h:outputText id="emailPopupNuevoLabel" value="#{msg.email}*" />
						<p:inputText id="emailPopupNuevo"
							value="#{beanClientes.clienteNuevo.email}"
							style="width: 260px; font-weight:bold; height:100%; ">
						</p:inputText>
						<h:outputText id="tipoPopupNuevoLabel" value="#{msg.tipo}*" />
						<p:selectOneRadio id="radioTipoNuevo" label="TipoCliente"
							value="#{beanClientes.idTipoCliente}">
							<f:selectItems value="#{beanClientes.listaSelectTiposClientes}" />
						</p:selectOneRadio>
					</h:panelGrid>
					<h:panelGrid style="float: right;" columns="2">
						<p:commandButton value="#{msg.aceptar }" icon="ui-icon-check"
							actionListener="#{beanClientes.saveCliente }"
							update=":form:clientesTable growl displayNuevo" />
						<p:commandButton value="#{msg.cancelar }"
							icon="ui-icon-closethick" oncomplete="nuevoDialog.hide()"
							actionListener="#{beanClientes.saveClienteCancel }" />
					</h:panelGrid>
				</p:dialog>
				<!-- Fin de panel de nuevo -->
				<!-- Inicio de panel de edicion -->
				<p:dialog id="dialogEditar" header="#{msg.frsEditarRegistro}"
					widgetVar="editarDialog" closable="true" modal="true"
					position="top" draggable="false" width="400">
					<h:panelGrid columns="2" width="100%" id="displayEditar" style="text-align:left;">
						<!-- 
					<h:outputText value="#{msg.clave}" />
					<h:panelGroup>
						<p:inputText id="selectedCve"
							value="#{beanClientes.selectedClienteClave}"
							style="width: 260px; font-weight:bold; height:100%; " />
						<p:watermark for="selectedCve"
							value="#{beanClientes.clienteSelected.clave }" />
					</h:panelGroup>
					-->
						<h:outputText value="#{msg.nombre}" />
						<h:panelGroup>
							<p:inputText id="inputNombreSelected"
								value="#{beanClientes.selectedClienteNombre}"
								style="width: 260px; font-weight:bold; height:100%; " />
							<p:watermark for="inputNombreSelected"
								value="#{beanClientes.clienteSelected.nombre }" />
						</h:panelGroup>
						<h:outputText value="#{msg.responsable}" />
						<h:panelGroup>
							<p:inputText id="inputResponsableSelected"
								style="width: 260px; font-weight:bold; height:100%; "
								value="#{beanClientes.selectedClienteResponsable }" />
							<p:watermark for="inputResponsableSelected"
								value="#{beanClientes.clienteSelected.responsable }" />
						</h:panelGroup>
						<h:outputText value="#{msg.telefono}" />
						<h:panelGroup>
							<p:inputText id="inputTelefonoSelected"
								style="width: 260px; font-weight:bold; height:100%; "
								value="#{beanClientes.selectedClienteTelefono }" />
							<p:watermark for="inputTelefonoSelected"
								value="#{beanClientes.clienteSelected.telefono }" />
						</h:panelGroup>
						<h:outputText value="#{msg.email}" />
						<h:panelGroup>
							<p:inputText id="inputEmailSelected" label="EditarEmail"
								style="width: 260px; font-weight:bold; height:100%; "
								value="#{beanClientes.selectedClienteEmail }">
							</p:inputText>
							<p:watermark for="inputEmailSelected"
								value="#{beanClientes.clienteSelected.email }" />
						</h:panelGroup>
						<h:outputText value="#{msg.tipo}" />
						<p:selectOneRadio id="nuevoSelectTipo"
							value="#{beanClientes.selectedTipoCliente}">
							<f:selectItems value="#{beanClientes.listaSelectTiposClientes}" />
						</p:selectOneRadio>
					</h:panelGrid>
					<h:panelGrid style="float: right;" columns="2">
						<p:commandButton value="#{msg.aceptar }" icon="ui-icon-check"
							oncomplete="editarDialog.hide()"
							actionListener="#{beanClientes.updateCliente }"
							update=":form:clientesTable, growl" />
						<p:commandButton value="#{msg.cancelar }"
							icon="ui-icon-closethick" oncomplete="editarDialog.hide()"
							actionListener="#{beanClientes.cancelDeleteCliente }" />
					</h:panelGrid>
				</p:dialog>
				<!-- Fin de panel de edicion -->
				<!-- Panel de borrado -->
				<p:confirmDialog showEffect="fade" widgetVar="borrarDialog"
					header="#{msg.confirmar }" message="#{msg.frsBorrarConfirmacion }">
					<p:commandButton value="#{msg.aceptar }"
						actionListener="#{beanClientes.deleteCliente}"
						update="clientesTable, growl" styleClass="ui-confirmdialog-yes"
						icon="ui-icon-check" oncomplete="borrarDialog.hide()" />
					<p:commandButton value="#{msg.cancelar }" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close"
						onclick="borrarDialog.hide()" />
				</p:confirmDialog>
				<!-- Fin de panel de borrado -->
			</h:form>
		</ui:define>

	</ui:composition>
</h:body>
</html>